<template>
  <div class="register">
    <form action="" ref="fromId" class=""  id="info">
      <!-- <div v-if="flag">
        <ul>
          <li><label>真实姓名：</label><input type="text" name="name" id="" v-model="name"></li>
          <li><label>身份证号：</label><input type="number" name="IDcard" id="" v-model="IDcard"></li>
          <li class="idcrad">
            <label>身份证正反面：</label>
            <img :src="imgURL" alt="" v-if="imgURL">
            <input type="file" name="idCardA" v-if="isImg" accept="image/*" @change="changeImage($event,'idCardA')" ref="avatarInput">
            <img :src="imgURL2" alt="" v-if="imgURL2">
            <input class="idCardB" type="file" name="idCardB" v-if="!isImg" accept="image/*"  @change="changeImage($event,'idCardB')" ref="avatarInput">
            <img src="../../assets/img/register_icon_sfz.png" alt="" v-if="idImg2">
            <span>{{imgNo}} / 2</span>
          </li>
        </ul>
        <div class="next" @click.stop="next()">下一步</div>
      </div> -->
      <div v-if="flag">
        <ul>
          <li><label>手机号码：</label><input type="number" name="phone" oninput="if(value.length>11)value=value.slice(0,11)" id="" v-model="phone"></li>
          <li><label>验证码：</label><input type="number" name="code" oninput="if(value.length>6)value=value.slice(0,6)" id="" v-model="code" class="c-inp"><span class="code" @click.stop="sendSMSUser()" v-if="codeState">获取验证码</span><span class="code" v-if="!codeState">{{ timer }}(s)</span></li>
          <li><label>设置密码：</label><input type="password" name="password" id="" v-model="password"></li>
          <li><label>常驻区域：</label><urbantertiary-linkage :provName="provinceId" :cityName="cityId" :distName="districtId"  style="display: inline-block; margin-left: .2rem;" @get-id="getId"></urbantertiary-linkage></li>
        </ul>
        <div class="next" @click.stop="regist">注册</div>
        <div class="protocol">点击注册代表您同意<span @click.stop="getIntroInfo">《用户协议》</span></div>
      </div>
      <div class="introInfo-box" v-if="isClose" @click="isClose = false">
        <div class="introInfo" @click.stop="isClose = true">
            <div class="intro-content" v-html="introInfo.content"></div>
            <div class="intro-close" @click.stop="isClose = false">确定</div>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
import urbantertiaryLinkage from '../common/urbanTertiaryLinkage/urbanTertiaryLinkage.vue'
export default {
  components: {
    urbantertiaryLinkage
  },
  data () {
    return {
      flag: true,
      name: '', // 姓名
      IDcard: '', // 身份证号
      address: '', // 常驻区域
      phone: '', // 手机号码
      code: '', // 验证码
      password: '', // 密码
      provId : '', // 省ID
      cityId : '', // 市ID
      distId : '', // 区ID
      idCardA : '', // 手持身份证照正面
      idCardB : '', // 手持身份证照反面
      codeState: true, // 验证码开关
      timer: 60, // 验证码倒计时
      isImg: true,
      idImg2: true,
      imgURL: '',
      imgURL2: '',
      imgNo: 0,
      introInfo: '', // 协议信息
      isClose: false // 关闭协议
    }
  },
  methods: {
    //获取省市区ID
    getId(provinceId,cityId,districtId,name){
      this.provId = provinceId;
      this.cityId = cityId;
      this.distId = districtId;
      this.address = name;
      console.log(this.provId,this.cityId,this.distId,this.address);
    },
    // 点击下一步的校验
    // next(){
      // if(!this.name){
      //   alert("姓名不能为空");
      // }else if(!this.IDcard){
      //   alert("身份证号不能为空");
      // }else if(!this.idCardA){
      //   alert("手持身份证照正反面不能为空");
      // }else if(!this.idCardB){
      //   alert("手持身份证照正反面不能为空");
      // }else{
        // this.flag = false;
      // }
    // },
    // 获取验证码
    sendSMSUser () {
      if (this.tools.isTel(this.phone)) {
          let _this = this
          this.codeState = !this.codeState
          let interval = setInterval(function() {
              if ((_this.timer--) <= 0) {
                  _this.timer = 60
                  _this.codeState = !_this.codeState
                  clearInterval(interval)
              }
          }, 1000)
          this.$ajax({
              url: `${this.baseUrl}/api/redApiController/smsCodeForH5`,
              data: {
                  phone: this.phone,
              },
              success: res => {
                  if(res.resultCode==0){
                  }else{
                      this.timer = 0;
                      alert(res.data.resultMessage);
                  }
              }
          })
      }else {
          alert('请输入正确的手机号');
      }
    },
    // 注册
    regist () {
      if (this.tools.isTel(this.phone)) {
          this.$ajax({
              url: `${this.baseUrl}/api/redApiController/registH5`,
              data: {
                phone: this.phone,
                code: this.code,
                // trueName: this.name,
                // idNo: this.IDcard,
                provId: this.provId,
                cityId: this.cityId,
                distId: this.distId,
                address: this.address,
                // idCardA: this.idCardA,
                // idCardB: this.idCardB,
                recCode: this.recCode,
                password: this.sha1(this.password).toUpperCase(),
              },
              success: res => {
                  if(res.resultCode==0){
                    alert('注册成功！');
                    this.$router.push({path: '/download'});
                  }else{
                      alert(res.data.resultMessage);
                  }
              }
          })
      }else {
          alert('请输入正确的手机号');
      }
    },
    changeImage(e,idCard){
        var files = e.target.files, file;
        if (files && files.length > 0) {
          file = files[0];
          var URL = window.URL || window.webkitURL;
          if(idCard == 'idCardA'){
            let idCardA = e.target.files[0];
            this.imgURL = URL.createObjectURL(file);
            this.isImg = false;
            this.imgNo = 1;
            // 上传图片
            let data = new FormData();
            data.append('key', "0059c6dbbc884b75a7c1c43f083bcc36040eeb144555416c9592bbec9d2340c0");
            data.append('file', idCardA);
            this.$ajax({
              url: '/api/uploadApiController/upload',
              data: data,
              formData: true,
              success: res => {
                if(res.resultCode==0){
                  this.idCardA = res.resultData;
                  console.log(this.idCardA);
                }else{
                    alert(res.data.resultMessage);
                }
              }
            })
          }else if(idCard == 'idCardB'){
            let idCardB = e.target.files[0];
            this.imgURL2 = URL.createObjectURL(file);
            this.idImg2 = false;
            this.imgNo = 2;
            // 上传图片
            let data1 = new FormData();
            data1.append('key', "0059c6dbbc884b75a7c1c43f083bcc36040eeb144555416c9592bbec9d2340c0");
            data1.append('file', idCardB);
            this.$ajax({
              url: '/api/uploadApiController/upload',
              data: data1,
              formData: true,
              success: res => {
                if(res.resultCode==0){
                  this.idCardB = res.resultData;
                  console.log(this.idCardB);
                }else{
                    alert(res.data.resultMessage);
                }
              }
          });
        }
      }
    },
    // 查看注册协议
    getIntroInfo() {
        this.$ajax({
            url: `${this.baseUrl}/api/publicApiController/getIntroInfo`,
            data: {
            type: 2
            },
            success: res => {
                if(res.resultCode==0){
                this.introInfo = res.resultData;
                this.isClose = true;
                }else{
                    alert(res.data.resultMessage);
                }
            }
        })
    }
  },
  created(){
    this.recCode = this.$route.query.recCode;
  }
}
</script>
<style lang="less" scoped>
.register{
  width: 100vw;
  height: 100vh;
  padding: .2rem;
  background-color: #f5f5f5;
  color: #333;
  .idcrad{
    position: relative;
    height: 2.78rem;
    >label{
      display: block;
    }
    >img{
      width: 1.54rem;
      height: 1.54rem;
    }
    >input{
      position: absolute;
      bottom: .2rem;
      left: .2rem;
      width: 1.54rem;
      height: 1.54rem;
      background-color: #fff;
      opacity: 0;
      &.idCardB{
        bottom: .2rem;
        left: 1.94rem;
      }
    }

  }
  li{
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    margin-bottom: .2rem;
    padding: 0 .2rem;
    background-color: #fff;
    border-radius: .24rem;
    >input{
      width: 4.8rem;
      height: .8rem;

    }
  }
  .next{
    width: 5.9rem;
    height: .88rem;
    line-height: .88rem;
    margin: 0 auto;
    margin-top: .78rem;
    border-radius: .4rem;
    background-color: #509eff;
    text-align: center;
    color: #fff;
  }
  .protocol{
    margin-top: .2rem;
    text-align: center;
    color: #7285a1;
    >span{
      color:#ff6561;
    }
  }
  .c-inp{
    width: 3rem;
  }
  .code{
    display: inline-block;
    width: 2.18rem;
    height: 100%;
    text-align: center;
    border-left: 1px solid #e5e5e5;
    color: #333;
  }
  .introInfo-box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, .5)
  }
  .introInfo {
    height: 80%;
    margin: 1.6rem .5rem;
    padding: .2rem;
    position: absolute;
    top: 0;
    left: 0;
    overflow: scroll;
    background-color: #fff;
    border-radius: .4rem;
    .intro-content {
        background-color: #fff;
    }
    .intro-close {
        background-color: #509eff;
        margin: 0 auto;
        width: 2rem;
        border-radius: .1rem;
        line-height: .6rem;
        font-size: .4rem;
        color: #fff;
        text-align: center;
    }
  }
}
</style>
